<template>
    <div class="goods-sale">
        <!--TODO 增加一个新品推荐展示-->

        <!--TODO 增加一个人气推荐展示-->

        <!--分类推荐-->
        <div v-for="(item,i) in postItems.length" :key="i">
            <!--分类推荐横幅、自定义组件-->
            <poster :postItem="postItems[i]"></poster>
            <!--分类推荐下的商品列表、自定义组件-->
            <goods-box :goodsItem="goodsItems[i]"></goods-box>
        </div>
    </div>
</template>

<script>
    import Poster from './Poster'   // 分类推荐
    import GoodsBox from './GoodsBox'  // 分类推荐下对应的推荐商品

    export default {
        data() {
            return {
                postItems: [],
                goodsItems: []
            }
        },

        //生命周期钩子函数
        mounted() {
            this.init();
        },
        methods: {
            init() {
                // 获取推荐的分类以及该分类对应的推荐商品，返回的即为传输对象HomeGoodsSaleDTO
                this.axios.get("/home/goods_sale").then((res) => {
                    for (let index = 0; index < res.length; index++) {
                        const cate = res[index];
                        //分类推荐横幅
                        this.postItems.push({
                            src: cate.pic,
                            url: cate.url
                        });

                        let goods = [];
                        let productList = cate.productList;
                        //遍历当前分类下的商品信息，将其push到临时数组goods中
                        for (let j = 0; j < productList.length; j++) {
                            const product = productList[j];
                            goods.push({
                                value: product.name,
                                //商品副标题
                                desc: product.subTitle,
                                //控制价格是否要加上 xx元起
                                sub: product.sub == 0 ? true : false,
                                //商品售价
                                newPrice: product.price,
                                //如果商品价格 小于原来的市场价，则将市场价赋值给oldPrice显示，否则为null不显示
                                oldPrice: product.price < product.originalPrice ? product.originalPrice : null,
                                src: product.pic,
                                url: "/#/detail/" + product.id
                            })
                        }
                        //将商品信息push到data数据域的goodsItem中，由goodsItems去渲染
                        this.goodsItems.push({
                            boxTitle: cate.categoryName,
                            url: '/#/searchResult/' + cate.categoryName,
                            listData: {
                                goods: goods
                            }
                        });

                    }
                });
            }
        },
        components: {
            'Poster': Poster,
            'GoodsBox': GoodsBox
        }
    }
</script>

<style lang="less">
    .goods-sale {
        position: relative;

        text-align: center;
        width: 1226px;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    .goods-sale * {
        box-sizing: border-box;
    }
</style>